<template>
	<div class="me" id="personalCenter">
		<!-- <pull-refresh v-model="refresh" @refresh="refreshFun" > -->
		<userInfo ref="userInfoRef"></userInfo>

		<div class="scroll_area">
			<relevant></relevant>
			<div class="action_wrap">
				<div class="action_list">
					<nut-collapse v-model="val">
						<nut-collapse-item :name="item.name" v-for="item in collapse_list" :key="item.id">
							<template #icon>
								<iconpark-icon class="close" icon-id="xia" size="14px"></iconpark-icon>
							</template>
							<template #title>
								<div class="item_left">
									<iconpark-icon class="close mr-8" :icon-id="item.icon" size="20px"></iconpark-icon>
									<span>{{ t(item.label) }}</span>
									<div class="unread" v-if="item.name == 'service' && item.id == 2 && pageStore.unread">
										{{ pageStore.unread }}
									</div>
								</div>
							</template>
							<div class="list-sub_item mb-10" v-shrink-on-click v-for="opt in item.subList" :key="opt.id" @click="handleClick(opt)">
								<div class="item-left">
									<iconpark-icon class="close mr-8" :icon-id="opt.icon" size="20px"></iconpark-icon>
									<nut-badge :value="item.name == 'service' && opt.id == 11 ? pageStore.unread : ''">
										<span>{{ t(opt.label) }}</span>
									</nut-badge>
								</div>
								<iconpark-icon class="close mr-4 right_icon" icon-id="you" size="14px"></iconpark-icon>
							</div>
						</nut-collapse-item>
					</nut-collapse>
					<!-- 其他 -->
					<div class="other_list_item mb-10" v-shrink-on-click v-for="item in list" :key="item.id" @click="goToPage(item)">
						<div class="item_left">
							<iconpark-icon :icon-id="item.icon" size="1.3rem" class="mr-4"></iconpark-icon>
							<span>{{ t(item.label) }}</span>
						</div>
						<iconpark-icon class="close mr-4 right_icon" icon-id="you" size="14px"></iconpark-icon>
					</div>
				</div>
				<!-- 退出登录 -->

				<div class="sign_out" v-if="isLocalLoggedIn" @click="signOut">
					<iconpark-icon icon-id="tuichu" size="1.15rem" class="mr-4"></iconpark-icon>
					<span>{{ t('mine_mylogout') }}</span>
				</div>
			</div>
			<!-- <group></group> -->
		</div>
		<!-- </pull-refresh> -->
		<!-- 分享弹窗 -->
		<shareModal v-model:visible="visible"></shareModal>
		<!-- 有奖反馈 -->
		<Modal v-model:visible="isShow" :title="t('rewarded_feedback')" @close="content = ''">
			<div class="popup_body feedback_popup_body">
				<!--                <div class="info">请输入您要反馈的信息</div>-->
				<div class="body_main">
					<nut-textarea v-model="content" :placeholder="t('placeholder_1')" :rows="7" />
					<div class="submit_btn" style="margin-left: 0px; margin-right: 0px">
						<nut-button class="submit" @click="submit">{{ t('btn_label_submit') }}</nut-button>
					</div>
				</div>
			</div>
		</Modal>
		<Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
		<nut-dialog :title="showTitle" teleport="#app" v-model:visible="showSignOut">
			<div>
				{{ t('home_page_logout_tips') }}
				<div class="btn_group">
        <div class="submit" @click="signOutSumit">{{ t('home_page_logout_submit') }}</div>
        <div class="cancel" @click="showSignOut = false">{{ t('home_page_cancel') }}</div>
				
				</div>
			</div>
		</nut-dialog>
	</div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import userInfo from './components/userInfo.vue';
import relevant from './components/relevant.vue';
// import group from './components/group.vue'
// import PullRefresh from '@/components/PullRefresh.vue'
const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
const Toast = defineAsyncComponent(() => import('@/components/Toast.vue'));
import { NetPacket } from '@/netBase/NetPacket';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { useRouter } from 'vue-router';
import pinia from '@/store/index';
import { Local } from '@/utils/storage';
import shareModal from './components/shareModal.vue';
import { handleOpenLink } from '@/utils/publicMethods';
import { aaa, bbb } from '@/net/Utils';
import { useI18n } from 'vue-i18n';
import { getDeviceType } from '@/utils/publicMethods';
import { isLocalLoggedIn, roleInfo, settings, serviceUrlObj } from '@/utils/commonVar';
import PKwebsocket from '@/lolo/Ws';
import eventBus from '@/lolo/eventBus';
import { showDialog } from '@nutui/nutui';
import { enablePullToRefresh, disablePullToRefresh } from "@/utils/publicMethods";
const { t } = useI18n();

const pageStore = Page(pinia);
const router = useRouter();
const visible = ref(false);
const isShow = ref(false); // 有奖反馈控制
const showSignOut = ref(false);
const content = ref('');
// const refresh = ref(false);
const val = ref([]);
const showToast = ref(false);
const toast_value = ref('');
const userInfoRef = ref();
const showTitle = t("activity_page_tip")
const collapse_list = [
	{
		label: 'records_center',
		icon: 'jiluzhongxin',
		id: 1,
		name: 'record',
		subList: [
			{
				label: 'recharge_record',
				icon: 'document1',
				id: 1,
				route: 'record',
				query: { page: 'recharge' },
			}, // 充值记录
			{
				label: 'mine_mywithdraw',
				icon: 'document2',
				id: 2,
				route: 'record',
				query: { page: 'withdraw' },
			}, // 提款记录
			{
				label: 'mine_mybet',
				icon: 'document3',
				id: 3,
				route: 'record',
				query: { page: 'bet' },
			}, // 投注记录
			{
				label: 'mine_myaudit',
				icon: 'document4',
				id: 4,
				route: 'record',
				query: { page: 'account' },
			}, // 账变记录
			{
				label: 'rakeback_records',
				icon: 'liushui',
				id: 5,
				route: 'record',
				query: { page: 'audit' },
			}, // 流水记录
			{
				label: 'route_page_washRecord',
				icon: 'document5',
				id: 6,
				route: 'record',
				query: { page: 'wash' },
			}, // 洗码记录
			{
				label: 'route_page_loginRecord',
				icon: 'denglu',
				id: 7,
				route: 'login_record',
			}, // 登录记录
		],
	},
	{
		label: 'mine_myservice',
		icon: 'kefu1',
		id: 2,
		name: 'service',
		subList: [
			// { label: "home_page_chat", icon: "liaotians", id: 11, url: "" },
			{
				label: 'home_page_onlineService',
				icon: 'zaixiankf',
				id: 6,
				url: 'service_live_url',
			},
			{ label: 'Messenger', icon: 'messenger', id: 7, url: 'service_message_url' },
			{ label: 'Telegram', icon: 'feiji', id: 8, url: 'service_tg_url' },
		],
	},
	{
		label: 'app',
		icon: 'app',
		id: 3,
		name: 'app',
		subList: [
			{ label: 'share', icon: 'fenxiang', id: 9 },
			{ label: 'download', icon: 'xiazai', id: 10 },
		],
	},
];
const list = [
	{ label: 'mine_mypay', icon: 'zhifu', id: 1, url: '/paymentManagement' }, // 支付管理
	{ label: 'security_setting', icon: 'security1', id: 2, url: '/securitySettings' }, // 安全设置
	{ label: 'rewarded_feedback', icon: 'feedback1', id: 3 }, // 有奖反馈
];

// 功能点击
const handleClick = async (item: any) => {
	if (item.route) {
		return router.push({
			name: item.route,
			query: item.query,
		});
	}
	switch (item.id) {
		case 1:
			break;
		case 6: // 在线客服
		case 7: // Message
		case 8: // 小飞机
			handleOpenLink(serviceUrlObj.value[item.url]);
			break;
		case 9: // 分享
			visible.value = true;
			break;
		case 10: // 下载
			const deviceType = getDeviceType();
			//console.log(deviceType); // 输出: iOS 或 Android 或 unknown
			if (deviceType == 'iOS') {
				handleOpenLink(settings.value.appDownTipList.app_down_url_iOS);
			} else if (deviceType == 'Android') {
				handleOpenLink(settings.value.appDownTipList.app_down_url_android);
			} else {
				handleOpenLink(settings.value.appDownTipList.app_down_url);
			}

			//   handleOpenLink(settings.value.appDownTipList.app_down_url);
			break;
		case 11: //  聊天信息
			if (Local.get('user')?.token) {
				Local.set('iscocos', false);
				router.push(`/chatList`);
			} else {
				await User(pinia).setLogin(true);
				router.push('/');
			}
			break;
		default:
			break;
	}
};

const signOut = async () => {
	showSignOut.value = true;
	// showDialog({
	//   title: t("activity_page_tip"),
	//   content: '是否退出当前账号?',
	//   okText: '取消',
	//   cancelText: '确认退出',
	//   onOk: async () => {
	//     eventBus.emit("msg_notify_login_result", { hideTip: true });
	//   },
	// });

	// eventBus.emit("msg_notify_login_result", { hideTip: true });
};

const signOutSumit = ()=>{
  showSignOut.value = false
  eventBus.emit("msg_notify_login_result", { hideTip: true });
}



const goToPage = (item: any) => {
	if (item.url) {
		router.push(`${item.url}`);
	}
	// 有奖反馈
	if (item.id == 3) {
		isShow.value = true;
	}
};
// 有奖反馈提交
const submit = () => {
	if (!content.value || content.value.length < 3) {
		toast_value.value = 'rakeback_page_notLg';
		showToast.value = true;
		return;
	}
	const query = NetPacket.req_submit_suggest();
	query.aaa = aaa.toString();
	query.bbb = bbb;
	query.role_id = Number(roleInfo.value?.id);
	query.content = content.value;
	PKwebsocket.instance.send(query, true, {
		callbackName: 'msg_nodify_submit_suggest',
		callback: notify_suggest,
	});
};

// let refreshDelayTimer: any = null;
// const refreshFun = () => {
//   if (isLocalLoggedIn.value) {
//     refresh.value = true;
//     // 获取用户信息
//     // let req_user_info = NetPacket.req_user_info();
//     // PKwebsocket.instance.send(req_user_info, true, {
//     //   callbackName: 'msg_notify_user_info',
//     //   callback: (data: any) => {
//     //     User(pinia).getInfo(data);
//     //   }
//     // })
//     // 同步会员信息
//     const vipInfoReq = NetPacket.req_vip_info();
//     PKwebsocket.instance.send(vipInfoReq, true, {
//       callbackName: 'msg_notify_vip_info',
//       callback: (data: any) => {
//         User(pinia).getVIPInfo(data);
//       }
//     })
//     refreshDelayTimer && clearTimeout(refreshDelayTimer);
//     refreshDelayTimer = setTimeout(() => {
//       refresh.value = false;
//     }, 1200)
//     console.log('userInfoRef.value', userInfoRef.value)
//     // 用户签到信息
//     userInfoRef.value?.getSignInfo();
//     // 余额
//     userInfoRef.value?.getNewMon();
//   }
// };

const notify_suggest = (rs: any) => {
	isShow.value = false;
	if (rs.code == 1) {
		toast_value.value = 'bank_success';
		showToast.value = true;
	}
};

onMounted(async () => {
  setTimeout(() => {
    enablePullToRefresh()
  }, 0)
});
onBeforeUnmount(() => {
  disablePullToRefresh()
})
</script>

<style lang="scss" scoped>
@use './index.scss';
.body_main {
	padding: 0 5px;
}

:deep(.nut-popup) {
	background-color: #131232;
	.nut-dialog {
		height: 173px;
    padding: 20px !important;
    .nut-dialog__content{
      margin-top: 10px !important;
      margin-bottom: unset !important;
    }
	}
}
.btn_group{
  display: flex;
  gap: 13px;
  margin-top: 25px;
  .submit{
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);

  }
  .cancel{
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #282747;
    cursor: pointer;
  }

}

</style>
<style lang="scss">
@use './indexReset.scss';
</style>
